<template>
  <div class="inout_info">
    <p class="title">
      车场进出实时监测
    </p>
    <div id="lines" v-loading="loading" element-loading-text="拼命加载中"  element-loading-background="rgba(8,18,79,1)"></div>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');

  export default {
    name: 'inout_info',
    data() {
      return {
        inNum: [],
        outNum: [],
        loading: true
      }
    },

    mounted() {
      this.getParkInOut();
    },

    methods: {
      getParkInOut() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/idc-park-in-out',
          params: {parkAddress: '河北省石家庄市'}
        }).then((res) => {
          if(res.code == 200) {
            res.data.forEach(item => {
              this.inNum.push(parseInt(item.in));
              this.outNum.push(parseInt(item.in));
            })
            // this.inNum = this.inNum.slice(6,21);
            // this.outNum = this.outNum.slice(6,21);
            this.inNum = ['150','340','2130','1840','700','600','1340','1890','1450','500','580','380','670','540','320'];
            this.outNum = ['80','160','540','450','800','1100','1920','1100','800','620','730','2160','2250','1120','820'];
            this.getOptionData();
          }
        })
      },

      getOptionData() {
        let _this = this;
        let myChart = echarts.init(document.getElementById('lines'));
        myChart.showLoading();
        // let myChart = this.$echarts.init(document.getElementById('lines'));
        let lineOption = {
          tooltip: {
            trigger: 'axis'
          },
          color:['#FAEE04','#24DD59'],
          legend: {
            x: 'right',
            data: [
              {
                name:'出场',
                textStyle:{
                  fontSize:10,
                  color:'#FAEE04'
                },
                icon:'circle'
              },
              {
                name:'入场',
                textStyle:{
                  fontSize:10,
                  color:'#24DD59'
                },
                icon:'circle',
              },
            ],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            color:'red',
            data: ["06","07","08","09","10","11","12","13","14","15","16","17","18","19","20"],
            axisTick:{ //y轴刻度线
              show:true
            },
            axisLine:{ //x轴
              show:true,
            },
            axisLabel: {
              color:'#ccc',
            },
          },
          yAxis: {
            show: true,
            type: 'value',
            splitNumber:2,
            splitLine:{show: false},   //去除网格线
            nameTextStyle:{
              color:'#abb8ce'
            },
            axisLabel: {
              color:'#0fcce4',
            },
            axisTick:{ //y轴刻度线
              show:false
            },
            axisLine:{ //y轴
              show:true
            }
          },
          series: [
            {
              name: '出场',
              type: 'line',
              smooth: true,
              data: function() {
               return _this.outNum;
              }(),
              // symbol: 'none',
              lineStyle:{
                color:'#FAEE04',
                width: '3'
              },
            },
            {
              name: '入场',
              type: 'line',
              smooth: true,
              data: function() {
                return _this.inNum;
              }(),
              // symbol: 'none',
              lineStyle:{
                color:'#24DD59',
                width: '3'
              },
            },
          ]
        }
        myChart.hideLoading();
        myChart.setOption(lineOption);
      },
    }
  }
</script>

<style scoped>
  .inout_info {
    height: 100%;
    padding: 1.4em;
  }
  .title {
    margin: 0;
    color: #00FFFF;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }
  #lines {
    height: 100%;
    width: 100%;
  }
  .title-icon {
    height: 0.7em;
    margin-right: -3px;
  }
  .iconOne,
  .iconTwo,
  .iconThree {
    animation: enlarge 0.9s infinite;
  }
  .iconTwo {
    animation-delay: 0.3s;
  }
  .iconThree {
    animation-delay: 0.6s;
  }

  @keyframes enlarge {
    0% {transform: scale(1);}
    33.33% {transform: scale(1.3);}
    66.66% {transform: scale(1);}
    100% {transform: scale(1);}
  }

</style>
